import React, { useMemo } from 'react';
import { Drawer } from 'antd';
import styled from 'styled-components';
import styles from '../styles.module.css'
import { useSelector } from 'react-redux';
import { RootState } from '../../store';

export type AlertAction = {
    key: string;
    label: string | React.ReactNode,
    onClick?: (key: string) => void,
}

export interface Props {
    title?: string | React.ReactNode;
    actions: AlertAction[];
    cancel?: AlertAction;
    show?: boolean;
    onClose?: () => void
}

const SHEET_ITEM_HEIGHT = 60; // unit px
const SHEET_SPACE = 11;

const Container = styled(Drawer)`
    overflow: hidden;
    border-radius: .5rem .5rem 0 0;
    
`

const Title = styled.div`
    font-size: 18px;
    color: #b4b5b9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: ${SHEET_ITEM_HEIGHT}px;
    border-bottom: 1px solid #f3f3f3;
    box-sizing: border-box;
`

const Content = styled.ul`
    padding: 0;
    margin: 0;
    background-color: #f3f3f3;
    display: flex;
    flex-direction: column;
`

const Item = styled.li<{ $last?: number }>`
    width: 100%;
    height: ${SHEET_ITEM_HEIGHT}px;
    border-bottom: ${({ $last }) => $last ? 'none' : '1px solid #f3f3f3'};
    box-sizing: border-box;
    display: flex;
    background-color: white;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #404246;
`

const Action = styled.div`
    
`

const Cancel = styled.div`
    
`

const SafeAreaBottom = styled.div<{ height: string }>`
    height: ${({ height }) => height};
`

const Sheet: React.FC<Props> = ({ title, actions, cancel, show, onClose }) => {
    const safeArea = useSelector((state: RootState) => state.safeArea)

    const sheetHeight = useMemo(() => {
        let height = Number(safeArea.bottom.replace('px', ''))

        height += SHEET_ITEM_HEIGHT * actions.length
        if (cancel) {
            height += SHEET_ITEM_HEIGHT + SHEET_SPACE
        }

        if (title) {
            height += SHEET_ITEM_HEIGHT
        }

        return height

    }, [safeArea.bottom, actions.length, cancel, title])

    return <Container
        height={sheetHeight}
        classNames={{ body: styles.sheet_body }}
        placement="bottom"
        closable={false}
        open={show}
        onClose={onClose}
        key="bottom"
    >
        {title && <Title>{title}</Title>}
        <Content>
            {actions.map((action, idx) =>
                <Item
                    key={idx}
                    $last={idx === actions.length - 1 ? 1 : 0}
                    onClick={() => action.onClick?.(action.key)}
                >
                    {
                        typeof action.label === 'string' ?
                            <Action>{action.label}</Action> :
                            action.label
                    }
                </Item>)}
            {cancel &&
                <Item
                    style={{ marginTop: `${SHEET_SPACE}px` }}
                    $last={1}
                    onClick={() => cancel.onClick?.(cancel.key)}
                >{
                        typeof cancel.label === 'string' ?
                            <Cancel>{cancel.label}</Cancel> :
                            cancel.label
                    }</Item>}
        </Content>
        <SafeAreaBottom height={safeArea.bottom} />
    </Container>
}

export default Sheet;